<template>
    <div style="height: 95vh;">
        <span style="color: #de3f2f;">*文件替换小工具，可以快速的实现两个文件夹的文件替换</span>
        <el-button type="primary" @click="handleRefresh" style="margin-left: 20px;">
            <el-icon>
                <Refresh />
            </el-icon>刷新页面
        </el-button>
        <div class="container">
            <div class="con-left">
                <el-input v-model="myPath" style="max-width: 500px" placeholder="请输入文件路径">
                    <template #append>
                        <el-button @click="handleSearch">查询文件</el-button>
                    </template>
                </el-input>
                <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                    <div>
                        <el-tag size="large">待替换文件总数：{{ total }}</el-tag>
                    </div>
                </div>
                <ul class="my-list">
                    <div
                        style="margin-bottom: 20px;white-space:nowrap;"
                        v-for="(item,index) in listData"
                        :key="index"
                    >{{ item }}</div>
                </ul>
            </div>
            <div class="con-right">
                <el-input v-model="ptPath" style="max-width: 500px" placeholder="请输入替换文件路径">
                    <template #append>
                        <el-button size="large" @click="handleReplace">替换文件</el-button>
                    </template>
                </el-input>
                <el-tag type="success" style="margin-left:20px;">更新总数：{{ replaceTotal + moveTotal }}</el-tag>
                <ul class="my-list">
                    <div>
                        <el-tag size="large" type="danger">新文件添加：{{ moveTotal }}</el-tag>
                    </div>
                    <div style="height: 30%; overflow: auto;">
                        <div
                            style="margin-bottom: 20px;white-space:nowrap;"
                            v-for="(item,index) in moveData"
                            :key="index"
                        >{{ item }}</div>
                    </div>
                    <div>
                        <el-tag size="large" type="warning">文件替换：{{ replaceTotal }}</el-tag>
                    </div>
                    <div style="height: 55%; overflow: auto;">
                        <div
                            style="margin-bottom: 20px;white-space:nowrap;"
                            v-for="(item,index) in relpaceData"
                            :key="index"
                        >{{ item }}</div>
                    </div>
                </ul>
            </div>
        </div>
    </div>
             
</template>

<script setup>
import { ref } from 'vue'
import { ipc } from '@/utils/ipcRenderer'
import { ipcApiRoute } from '@/api/main.js'
import { ElMessage } from 'element-plus'
const tigPath = ref("C:\\Users\\DELL\\Desktop\\test\\gkpt-web")
const myPath = ref('')
const ptPath = ref('')
const listData = ref([])
const relpaceData = ref([])
const moveData = ref([])
const total = ref(0)
const replaceTotal = ref(0)
const moveTotal = ref(0)
const handleSearch = () => {
    ipc.invoke(ipcApiRoute.fsSearch, { path: myPath.value }).then(r => {
        listData.value = r.list
        total.value = r.total
    })
}
const handleReplace = () => {
    if (listData.value.length === 0) {
        ElMessage.error('木有文件可以替换~')
        return
    }
    if (!ptPath.value) {
        ElMessage.error('请选择替换目录~')
        return
    }
    ipc.invoke(ipcApiRoute.fsReplace, { path: myPath.value, path2: ptPath.value }).then(r => {
        relpaceData.value = r.replaceFiles
        moveData.value = r.moveFiles
        replaceTotal.value = r.replaceTotal
        moveTotal.value = r.moveTotal
        if (r.total === total.value) {
            ElMessage({
                message: `${total.value}个文件成功更新~`,
                type: 'success',
            })
        }
    })
}
const handleRefresh = () => {
    myPath.value = ''
    ptPath.value = ''
    listData.value = []
    ptPath.value = ''
    listData.value = []
    relpaceData.value = []
    moveData.value = []
    total.value = 0
    replaceTotal.value = 0
    moveTotal.value = 0
}
</script>

<style lang="less" scoped>
.container {
    height: calc(100vh - 100px);
    width: 98%;
    display: flex;
    justify-content: space-between;
    background-color: #dde3e9;
    margin-top: 10px;
    > div {
        width: 49.5%;
        height: 100%;
        padding-right: 15px;
        background-color: #fff;
        border-radius: 8px;
        padding: 10px;
        box-sizing: border-box;
    }
}
.my-list {
    height: 85%;
    width: 95%;
    overflow: auto;
    padding: 0 20px 0 0;
}
</style>